<template>
  <div class="task-engine" >
    <Card class="engine-card">
      <template slot="title">
        <p>{{ !isEngineEdit ? '新建工程' : '编辑工程' }}</p>
      </template>
      <template slot="extra">
        <Button type="primary" @click="exitBtn" icon="md-exit">
          退出
        </Button>
      </template>
      <div class="engine-bread">
        <Breadcrumb>
          <BreadcrumbItem>{{ breadcrumbObj.title }}</BreadcrumbItem>
          <BreadcrumbItem>{{ breadcrumbObj.subTitle }}</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <Form class="engine-form" ref="form" :model="formItem" :label-width="120" lable-position="right" :rules="ruleValidate">
        <FormItem label="工程编号：" prop="projectCode">
          <Input placeholder="请输入" v-model="formItem.projectCode" class="width-num" :readonly="isEngineEdit"></Input>
        </FormItem>
        <FormItem label="工程名称：" prop="projectName">
          <Input placeholder="请输入" v-model="formItem.projectName" class="width-num"></Input>
        </FormItem>
        <FormItem label="工程描述：" prop="projectDesc">
          <Input type="textarea" v-model="formItem.projectDesc" :rows="5" placeholder="请输入" class="width-num"></Input>
        </FormItem>
        <FormItem label="任务资料：">
          <Row>
            <i-col span="10">
              <Upload
                type="drag"
                class="width-num"
                action="">
                <div style="padding: 20px 0">
                  <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                  <p style="color: #bebebe;">请在此处上传项目资料及相关附件</p>
                </div>
              </Upload>
            </i-col>
            <i-col span="12" v-show="isEngineEdit">
              <div style="width: 200px;height: 125px;">
                <img src="../../assets/images/engine.jpg" style="width: 100%;height: 100%;"/>
              </div>
            </i-col>
          </Row>
        </FormItem>
        <FormItem label="施工地址：" prop="projectAddress">
          <Input placeholder="请输入" v-model="formItem.projectAddress" class="width-num"></Input>
        </FormItem>
        <FormItem label="要求开工日期：" transfer prop="projectStartTime">
          <DatePicker placeholder="请选择" v-model="formItem.projectStartTime" class="width-num"></DatePicker>
        </FormItem>
        <FormItem label="要求交付日期：" prop="projectEndTime">
          <DatePicker placeholder="请选择" transfer v-model="formItem.projectEndTime" class="width-num"></DatePicker>
        </FormItem>
        <FormItem label="项目状态：" prop="projectStatus">
          <RadioGroup v-model="formItem.projectStatus">
            <Radio label="招标公示">招标公示</Radio>
            <Radio label="招标完成" class="margin-left-20">招标完成</Radio>
            <Radio label="开工" class="margin-left-20">开工</Radio>
            <Radio label="验收" class="margin-left-20">验收</Radio>
            <Radio label="完成" class="margin-left-20">完成</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="分类：" prop="projectClass">
          <RadioGroup v-model="formItem.projectClass">
            <Radio label="基础性疏浚">基础性疏浚</Radio>
            <Radio label="维修性疏浚" class="margin-left-20">维修性疏浚</Radio>
            <Radio label="临时性疏浚" class="margin-left-20">临时性疏浚</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="船舶航行要求：">
          <Input type="textarea" v-model="formItem.shipNavigationRequirements" :rows="3" placeholder="" class="width-num"></Input>
        </FormItem>
        <FormItem label="航道稳定要求：">
          <Input type="textarea" v-model="formItem.channelStabilityRequirements" :rows="3" class="width-num"></Input>
        </FormItem>
        <FormItem label="施工要求：">
          <Input type="textarea" v-model="formItem.constructionRequirements" :rows="3" class="width-num"></Input>
        </FormItem>
        <div class="flex title-desc">
          <div>计划开始时间</div>
          <div>计划完成时间</div>
          <div>实际开始时间</div>
          <div>实际完成时间</div>
          <div>当前进度</div>
        </div>
        <FormItem label="工作流：">
          <Steps :current="Number(formItem.currFlowIndex)" class="engine-step" size="small" direction="vertical">
            <Step title="规划设计">
              <template slot="content">
                <div class="flex">
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow1EstimatedStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow1EstimatedEndTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow1RealStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow1RealEndTime" @on-change="onFlowTimeChanged('flow1RealEndTime')" class="width-num-1"></DatePicker>
                  <Select v-model="formItem.flow1Progress" transfer class="width-num-1">
                    <Option value="0%">0%</Option>
                    <Option value="25%">25%</Option>
                    <Option value="50%">50%</Option>
                    <Option value="75%">75%</Option>
                    <Option value="100%">100%</Option>
                  </Select>
                </div>
              </template>
            </Step>
            <Step title="挖槽定线">
              <template slot="content">
                <div class="flex">
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow2EstimatedStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow2EstimatedEndTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow2RealStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow2RealEndTime" @on-change="onFlowTimeChanged('flow2RealEndTime')" class="width-num-1"></DatePicker>
                  <Select v-model="formItem.flow2Progress" transfer class="width-num-1">
                    <Option value="0%">0%</Option>
                    <Option value="25%">25%</Option>
                    <Option value="50%">50%</Option>
                    <Option value="75%">75%</Option>
                    <Option value="100%">100%</Option>
                  </Select>
                </div>
              </template>
            </Step>
            <Step title="浚前测量">
              <template slot="content">
                <div class="flex">
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow3EstimatedStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow3EstimatedEndTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow3RealStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow3RealEndTime" @on-change="onFlowTimeChanged('flow3RealEndTime')" class="width-num-1"></DatePicker>
                  <Select v-model="formItem.flow3Progress" transfer class="width-num-1">
                    <Option value="0%">0%</Option>
                    <Option value="25%">25%</Option>
                    <Option value="50%">50%</Option>
                    <Option value="75%">75%</Option>
                    <Option value="100%">100%</Option>
                  </Select>
                </div>
              </template>
            </Step>
            <Step title="导标设置">
              <template slot="content">
                <div class="flex">
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow4EstimatedStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow4EstimatedEndTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow4RealStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow4RealEndTime" @on-change="onFlowTimeChanged('flow4RealEndTime')" class="width-num-1"></DatePicker>
                  <Select v-model="formItem.flow4Progress" transfer class="width-num-1">
                    <Option value="0%">0%</Option>
                    <Option value="25%">25%</Option>
                    <Option value="50%">50%</Option>
                    <Option value="75%">75%</Option>
                    <Option value="100%">100%</Option>
                  </Select>
                </div>
              </template>
            </Step>
            <Step title="断面尺寸测量">
              <template slot="content">
                <div class="flex">
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow5EstimatedStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow5EstimatedEndTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow5RealStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow5RealEndTime" @on-change="onFlowTimeChanged('flow5RealEndTime')" class="width-num-1"></DatePicker>
                  <Select v-model="formItem.flow5Progress" transfer class="width-num-1">
                    <Option value="0%">0%</Option>
                    <Option value="25%">25%</Option>
                    <Option value="50%">50%</Option>
                    <Option value="75%">75%</Option>
                    <Option value="100%">100%</Option>
                  </Select>
                </div>
              </template>
            </Step>
            <Step title="施工辅助工程">
              <template slot="content">
                <div class="flex">
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow6EstimatedStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow6EstimatedEndTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow6RealStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow6RealEndTime" @on-change="onFlowTimeChanged('flow6RealEndTime')" class="width-num-1"></DatePicker>
                  <Select v-model="formItem.flow6Progress" transfer class="width-num-1">
                    <Option value="0%">0%</Option>
                    <Option value="25%">25%</Option>
                    <Option value="50%">50%</Option>
                    <Option value="75%">75%</Option>
                    <Option value="100%">100%</Option>
                  </Select>
                </div>
              </template>
            </Step>
            <Step title="开工展布">
              <template slot="content">
                <div class="flex">
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow7EstimatedStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow7EstimatedEndTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow7RealStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow7RealEndTime" @on-change="onFlowTimeChanged('flow7RealEndTime')" class="width-num-1"></DatePicker>
                  <Select v-model="formItem.flow7Progress" transfer class="width-num-1">
                    <Option value="0%">0%</Option>
                    <Option value="25%">25%</Option>
                    <Option value="50%">50%</Option>
                    <Option value="75%">75%</Option>
                    <Option value="100%">100%</Option>
                  </Select>
                </div>
              </template>
            </Step>
            <Step title="施工">
              <template slot="content">
                <div class="flex">
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow8EstimatedStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow8EstimatedEndTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow8RealStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow8RealEndTime" @on-change="onFlowTimeChanged('flow8RealEndTime')" class="width-num-1"></DatePicker>
                  <Select v-model="formItem.flow8Progress" transfer class="width-num-1">
                    <Option value="0%">0%</Option>
                    <Option value="25%">25%</Option>
                    <Option value="50%">50%</Option>
                    <Option value="75%">75%</Option>
                    <Option value="100%">100%</Option>
                  </Select>
                </div>
              </template>
            </Step>
            <Step title="验收">
              <template slot="content">
                <div class="flex">
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow9EstimatedStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow9EstimatedEndTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow9RealStartTime" class="width-num-1"></DatePicker>
                  <DatePicker placeholder="请选择" transfer v-model="formItem.flow9RealEndTime" @on-change="onFlowTimeChanged('flow9RealEndTime')" class="width-num-1"></DatePicker>
                  <Select v-model="formItem.flow9Progress" transfer class="width-num-1">
                    <Option value="0%">0%</Option>
                    <Option value="25%">25%</Option>
                    <Option value="50%">50%</Option>
                    <Option value="75%">75%</Option>
                    <Option value="100%">100%</Option>
                  </Select>
                </div>
              </template>
            </Step>
          </Steps>
        </FormItem>
        <FormItem style="margin-top: 40px">
          <Button type="primary" class="width-num" @click="submitTask">确认</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
  import api from '@/api/project'
  export default {
    name: "EngineOperate",
    data() {
      return {
        isEngineEdit: true,
        formItem: {
          projectCode: '',
          projectName: '',
          projectType: '',
          projectStatus: '招标公示',
          projectClass: '基础性疏浚',
          projectDesc: '',
          projectAddress: '',
          projectStartTime: null,
          projectEndTime: null,
          contactName: null,
          contactPhone: null,
          acceptorName: null,
          acceptorPhone: null,
          shipNavigationRequirements: null,
          channelStabilityRequirements: null,
          constructionRequirements: null,
          imgs: null,
          currFlowIndex: 0,
          flow1EstimatedStartTime: null,
          flow1EstimatedEndTime: null,
          flow1RealStartTime: null,
          flow1RealEndTime: null,
          flow1Progress: null,
          flow2EstimatedStartTime: null,
          flow2EstimatedEndTime: null,
          flow2RealStartTime: null,
          flow2RealEndTime: null,
          flow2Progress: null,
          flow3EstimatedStartTime: null,
          flow3EstimatedEndTime: null,
          flow3RealStartTime: null,
          flow3RealEndTime: null,
          flow3Progress: null,
          flow4EstimatedStartTime: null,
          flow4EstimatedEndTime: null,
          flow4RealStartTime: null,
          flow4RealEndTime: null,
          flow4Progress: null,
          flow5EstimatedStartTime: null,
          flow5EstimatedEndTime: null,
          flow5RealStartTime: null,
          flow5RealEndTime: null,
          flow5Progress: null,
          flow6EstimatedStartTime: null,
          flow6EstimatedEndTime: null,
          flow6RealStartTime: null,
          flow6RealEndTime: null,
          flow6Progress: null,
          flow7EstimatedStartTime: null,
          flow7EstimatedEndTime: null,
          flow7RealStartTime: null,
          flow7RealEndTime: null,
          flow7Progress: null,
          flow8EstimatedStartTime: null,
          flow8EstimatedEndTime: null,
          flow8RealStartTime: null,
          flow8RealEndTime: null,
          flow8Progress: null,
          flow9EstimatedStartTime: null,
          flow9EstimatedEndTime: null,
          flow9RealStartTime: null,
          flow9RealEndTime: null,
          flow9Progress: null
        },
        ruleValidate: {
          code: [
            { required: true, message: '请填写', trigger: 'blur' },
            { pattern: /^[0-9a-zA-Z]*$/g, message: '只能输入字母或数字' },
            {
              type: 'string',
              max: 20,
              message: '长度不能超过20个字符',
              trigger: 'blur'
            }
          ],
          projectCode: [{ required: true, message: '请填写', trigger: 'blur' }],
          projectName: [{ required: true, message: '请填写', trigger: 'blur' }],
          projectDesc: [{ required: true, message: '请填写', trigger: 'blur' }],
          projectAddress: [{ required: true, message: '请填写', trigger: 'blur' }],
          projectStartTime: [{required: true, message: '请选择', trigger: 'change', type: 'date'}],
          projectEndTime: [{required: true, message: '请选择', trigger: 'change', type: 'date'}]
        },
        breadcrumbObj: {
          title: '',
          subTitle: ''
        }
      }
    },
    methods: {
      submitTask() {
        let _this = this;
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$Modal.confirm({
              title: '提示',
              content: '是否提交当前信息?',
              onOk: () => {
                if (_this.isEngineEdit) {
                  api.update(_this.formItem).then(({data}) => {
                    if (data.returnCode === 200) {
                      this.$Message.success('更新成功!');
                      this.exitBtn();
                    } else {
                      this.$Message.error(data.returnMsg);
                    }
                  })
                } else {
                  api.insert(_this.formItem).then(({data}) => {
                    if (data.returnCode === 200) {
                      this.$Message.success('添加成功!');
                      this.exitBtn();
                    } else {
                      this.$Message.error(data.returnMsg);
                    }
                  })
                }
                this.exitBtn();
              },
              onCancel: () => {
                return;
              }
            })
          }
        });
      },
      exitBtn() {
        this.$router.push({
          path: '/engine',
          query: {
            type: this.formItem.projectType
          }
        })
      },
      onFlowTimeChanged(type) {
        let currFlowIndex = 0;
        for (let i = 0; i < 10; i++) {
          if (this.formItem['flow' + i + 'RealEndTime'] !== null && this.formItem['flow' + i + 'RealEndTime'] !== '') {
            currFlowIndex = i;
          } else {
            break;
          }
        }
        this.formItem.currFlowIndex = currFlowIndex;
      }
    },
    mounted() {

    },
    created() {
      if(this.$route.query !== undefined && this.$route.query.id !== undefined) {
        this.isEngineEdit = true;
        api.getById(this.$route.query.id).then(({data}) => {
          if (data.returnCode === 200) {
            this.formItem = data.returnData;
            let list = this.formItem.projectType.split('-');
            this.breadcrumbObj.title = this.$dataInfo.getTitle(list[0]);
            this.breadcrumbObj.subTitle = this.$dataInfo.getSubTitle(this.formItem.projectType);
          } else {
            this.$Message.error(data.returnMsg);
          }
        })
      } else {
        this.isEngineEdit = false;
        this.formItem.projectType = this.$route.query.projectType;
        let list = this.formItem.projectType.split('-');
        this.breadcrumbObj.title = this.$dataInfo.getTitle(list[0]);
        this.breadcrumbObj.subTitle = this.$dataInfo.getSubTitle(this.formItem.projectType);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../styles/common";
  /deep/ .engine-step {
    margin-top: 10px;
  }
  /deep/ .engine-step .ivu-steps-content{
    position: absolute;
    top: 0;
    left: 100px;
    width: 600px;
  }
  /deep/ .engine-card .ivu-card-head p {
    font-size: 18px;
  }
  .title-desc {
    font-size: 12px;
    color: #888;
    font-weight: bold;
    margin-left: 248px;
    div {
      flex: none;
      text-align: center;
      width: 120px;
    }
  }
  .width-num-1 {
    width: 200px;
  }
  .task-engine {
    margin-top: 100px;
    margin-bottom: 30px;
    width: 100%;
    .engine-card {
      width: 1200px;
      margin: 0 auto;
    }
    .engine-form {
      margin: 30px 80px 30px;
    }
    .engine-bread {
      margin: 5px 42px;
    }
  }
  .width-num {
    width: 350px;
  }
</style>
